<template>
  <div>
    <div class="fill-base pd-lg">
      <div class="official-box pt-sm pb-lg pl-lg pr-lg">
        <div class="f-icontext c-caption mb-md">某某小程序关联的公众号</div>
        <div class="flex-center">
          <img class="official-img mr-md" :src="image" />
          <div class="flex-1 flex-between">
            <div>
              <div class="f-title c-title">公众号名称</div>
              <div class="f-caption c-caption">公众号描述文字</div>
            </div>
            <div
              class="official-btn f-paragraph flex-center radius-10"
              :style="{
                color: primaryColor,
                border: '1px solid' + primaryColor
              }"
            >
              查看
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'official',
  props: {
    o: Object
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.official-box {
  border: 1px solid #f4f6f8;
}
.official-img {
  width: 40px;
  height: 40px;
}
.official-btn {
  width: 60px;
  height: 30px;
}
</style>
